<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0,minimum-scale = 1.0,maximum-scale = 1.0,user-scalable = no">
    <meta http-equiv="X-UA-Compatible " content="ie=edge ">
    <title>Canvas-写字</title>
    <style>
        #canvas {
            display: block;
            margin: 0 auto;
        }

        #controller {
            margin: 0 auto;
        }

        .op_btn {
            float: right;
            margin: 10px 0 0 10px;
            border: 2px solid #aaa;
            width: 80px;
            height: 40px;
            line-height: 40px;
            font-size: 20px;
            text-align: center;
            border-radius: 5px 5px;
            cursor: pointer;
            background-color: white;
            font-weight: bold;
            font-family: Microsoft Yahei, Arial;
        }

        .op_btn:hover {
            background-color: #def;
        }

        .clearfix {
            clear: both;
        }

        .color_btn {
            float: left;
            margin: 10px 10px 0 0;
            border: 5px solid white;
            width: 40px;
            height: 40px;
            border-radius: 5px 5px;
            cursor: pointer;
        }

        .color_btn:hover {
            border: 5px solid violet;
        }

        .color_btn_selected {
            border: 5px solid blueviolet;
        }

        #black_btn {
            background-color: black;
        }

        #blue_btn {
            background-color: blue;
        }

        #green_btn {
            background-color: green;
        }

        #red_btn {
            background-color: red;
        }

        #orange_btn {
            background-color: orange;
        }

        #yellow_btn {
            background-color: yellow;
        }
    </style>
</head>

<body>
    <canvas id="canvas">
        您的浏览器不支持canvas
    </canvas>
    <div id="controller">
        <div id="black_btn" class="color_btn color_btn_selected"></div>
        <div id="blue_btn" class="color_btn"></div>
        <div id="green_btn" class="color_btn"></div>
        <div id="red_btn" class="color_btn"></div>
        <div id="orange_btn" class="color_btn"></div>
        <div id="yellow_btn" class="color_btn"></div>

        <div id="clear_btn" class="op_btn">清 除</div>
        <div class="clearfix"></div>
    </div>

    <script src="src/jquery-2.1.3.min.js"></script>
    <script>
        var canvasWidth = Math.min(800, $(window).width() - 20);
        var canvasHeight = canvasWidth;

        var strokeColor = 'black';
        var isMouseDown = false;
        var lastLoc = {
            x: 0,
            y: 0
        };
        var lastTimestamp = 0;
        var lastLineWidth = -1;

        var canvas = document.getElementById('canvas');
        var context = canvas.getContext('2d');

        canvas.width = canvasWidth;
        canvas.height = canvasHeight;

        $("#controller").css("width", canvasWidth + "px");
        $("#clear_btn").click(function (e) {
            context.clearRect(0, 0, canvasWidth, canvasHeight);
            drawGrid();
        });

        $(".color_btn").click(function () {
            $(".color_btn").removeClass("color_btn_selected");
            $(this).addClass("color_btn_selected");
            strokeColor = $(this).css("background-color");
        });

        function beginStroke(point) {
            isMouseDown = true;
            lastLoc = windowToCanvas(point.x, point.y)
            lastTimestamp = new Date().getTime();
        }

        function endStroke() {
            isMouseDown = false;
        }

        function moveStroke(point) {
            var curLoc = windowToCanvas(point.x, point.y);
            var curTimestamp = new Date().getTime();
            var s = calcDistance(curLoc, lastLoc);
            var t = curTimestamp - lastTimestamp;
            var lineWidth = calcLineWidth(t, s);

            context.beginPath();
            context.moveTo(lastLoc.x, lastLoc.y);
            context.lineTo(curLoc.x, curLoc.y);

            context.strokeStyle = strokeColor;
            context.lineWidth = lineWidth;
            context.lineCap = 'round';
            context.lineJoin = 'round';
            context.stroke();

            lastLoc = curLoc;
            lastTimestamp = curTimestamp;
            lastLineWidth = lineWidth;
        }

        var maxLineWidth = 30;
        var minLineWidth = 1;
        var maxStrokeV = 10;
        var minStrokeV = 0.1;

        maxLineWidth = canvasWidth/800*30;

        function calcLineWidth(t, s) {
            var v = s / t;
            var resultLineWidth;
            if (v <= minStrokeV) {
                resultLineWidth = maxLineWidth;
            } else if (v >= maxStrokeV) {
                resultLineWidth = minLineWidth;
            } else {
                resultLineWidth = maxLineWidth - (v - minStrokeV) / (maxStrokeV - minStrokeV) * (maxLineWidth -
                    minLineWidth)
            }

            if (lastLineWidth == -1) {
                return resultLineWidth;
            }
            return resultLineWidth * 1 / 3 + lastLineWidth * 2 / 3;
        }
        //计算两点间距离
        function calcDistance(loc1, loc2) {
            return Math.sqrt((loc1.x - loc2.x) * (loc1.x - loc2.x) + (loc1.y - loc2.y) * (loc1.y - loc2.y));
        }

        //坐标系转换
        function windowToCanvas(x, y) {
            var bbox = canvas.getBoundingClientRect();
            return {
                x: Math.round(x - bbox.left),
                y: Math.round(y - bbox.top)
            }
        }

        canvas.onmousedown = function (e) {
            e.preventDefault();
            beginStroke({
                x: e.clientX,
                y: e.clientY
            })
        }

        canvas.onmouseup = function (e) {
            e.preventDefault();
            endStroke()
        }

        canvas.onmouseout = function (e) {
            e.preventDefault();
            endStroke()
        }

        canvas.onmousemove = function (e) {
            e.preventDefault();
            if (isMouseDown) {
                moveStroke({
                    x: e.clientX,
                    y: e.clientY
                })
            }
        }

        canvas.addEventListener("touchstart", function (e) {
            e.preventDefault();
            touch = e.touches[0];
            beginStroke({
                x: touch.pageX,
                y: touch.pageY
            })
        });
        canvas.addEventListener("touchmove", function (e) {
            e.preventDefault();
            if (isMouseDown) {
                touch = e.touches[0];
                moveStroke({
                    x: touch.pageX,
                    y: touch.pageY
                })
            }
        });
        canvas.addEventListener("touchend", function (e) {
            e.preventDefault();
            endStroke();
        });


        function drawGrid() {
            context.save();
            context.strokeStyle = 'rgb(230,11,9)';
            context.beginPath();
            context.moveTo(3, 3);
            context.lineTo(canvasWidth - 3, 3);
            context.lineTo(canvasWidth - 3, canvasHeight - 3);
            context.lineTo(3, canvasHeight - 3);
            context.closePath();
            context.lineWidth = 6;
            context.stroke();
            context.beginPath();
            context.moveTo(0, 0);
            context.lineTo(canvasWidth, canvasHeight);
            context.moveTo(canvasWidth, 0);
            context.lineTo(0, canvasHeight);
            context.moveTo(canvasWidth / 2, 0);
            context.lineTo(canvasWidth / 2, canvasHeight);
            context.moveTo(0, canvasHeight / 2);
            context.lineTo(canvasWidth, canvasHeight / 2);
            context.lineWidth = 1;
            context.stroke();
            context.closePath();
            context.restore();
        }
        drawGrid();
    </script>

</body>

</html>